<template>
    <div class="list-pages" v-if="paginateList">
        <b-container>
            <div class="list-pages-title">精选故事</div>
            <b-row class="list-content">
                <b-col sm="6" md="4" lg="3" v-for="(item,index) in paginateList.list" :key="index">
                    <div class="list-item-card">
                        <b-link :href="`/article?id=${item.id}`" class="item-link">
                            <div class="pic">
                                <img :src="item.cover" alt="">
                                <label class="type">{{item.tag}}</label>
                            </div>
                            <div class="list-info">
                                <h3>{{item.title}}</h3>
                                <div class="title">{{item.desc}}</div>
                                <!-- <div class="list-user">
                                    <img class="user-pic" src="https://a0.muscache.com/im/pictures/user/b1cbc64c-8d1b-4529-bec7-eed82269dbfa.jpg?aki_policy=profile_x_medium" alt="">
                                    <span><i class="iconfont icon-dianzanshixin"></i>{{item.hits}}</span>
                                    <span><i class="iconfont icon-xinxi1"></i>5</span>
                                </div> -->
                            </div>
                        </b-link>
                    </div>
                </b-col>
            </b-row>
            <b-row class="paginationbox" v-if="paginateList">
                <b-pagination class="listpagination" size="md" :total-rows="paginateList.count" v-model="currentPage" :per-page="10" :hide-goto-end-buttons="true"></b-pagination>
            </b-row>
        </b-container>
        <cp-footer></cp-footer>
    </div>
</template>

<script>
export default {
    data(){
        return {
            paginateList:'',
            currentPage:1,
            page:1,
        }
    },
    components: {
        itemCard: () => import('../components/itemcard'),
        cpFooter:() => import('../components/footer'),
    },
    watch:{
        currentPage(){
            this.paginate(this.currentPage)
        }
    },
    mounted(){
        this.paginate(this.page);
    },
    methods:{
      paginate(page){
          this.$http.get(`${this.$URL_HTTP}/note/paginate?page=${page}`).then( (res) => {
              console.log(res)
              if(res.data.status){
                this.paginateList = res.data.payload;
              }else{
                console.log(res.data.message)
              }
          })
      }
    }
}
</script>


<style lang="less">
.list-pages{
    .list-pages-title{
        font-size:24px;
        line-height: 30px;
        color:#484848;
        margin:50px 0 30px;
    }
    .list-content{
        min-height:500px;
    }
    .list-item-card{
        width:100%;
        margin-bottom: 32px;
        .item-link{
            display: block;
            background:#f7f7f7;
            .pic{
                width:100%;
                border-radius:5px;
                overflow: hidden;
                position: relative;
                img{
                    width:100%;
                    display:block;
                    transition: all 0.3s linear;
                }
                .type{
                    padding:5px 10px;
                    text-align: center;
                    background:rgba(0, 0, 0, 0.38);
                    position: absolute;
                    bottom:10px;
                    right:10px;
                    font-size:12px;
                    color:#e1bf00;
                    border-radius: 3px;
                }
            }
            .list-info{
                padding:10px 5px;
                border:1px solid #eee;
                border-top:0;
                border-radius:0 0 5px 5px;
                h3{
                    font-size:18px;
                    line-height: 18px;
                    font-weight:400;
                    color:#333;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .title{
                    font-size:14px;
                    color:#484848;
                    line-height: 18px;
                    padding:8px 0 5px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
            }
            &:hover{
                img{
                    transform: scale(1.1);
                }
            }
        }
    }
    .paginationbox{
        padding:50px 0;
        .listpagination{
        margin:0 auto;
        .page-link{
            color:#333;
        }
        .page-item.active .page-link{
            background:transparent;
            color:#e1bf00;
            border-color:#e1bf00;
        }
        }
    }
}
</style>

